<template>
	<view class="authoration-page">
		<view class="form">
			<view class="form-item">
				<text class="label">姓名</text>
				<input v-model="form.real_name" placeholder="请输入真实姓名" />
			</view>
			<view class="form-item">
				<text class="label">性别</text>
				<picker
					@change="sexChange"
					:range="sex_list"
					range-key="label"
					class="flex ali-c"
					:style="{
						color: form.sex ? '#000000' : '#888888',
					}"
				>
					{{ form.sex ? sex_list[form.sex].label : "请选择性别" }}
					<uni-icons type="right" color="#888888" size="16" />
				</picker>
			</view>
			<view class="form-item">
				<text class="label">出生日期</text>
				<picker
					@change="birthChange"
					mode="date"
					class="flex ali-c"
					:style="{
						color: form.birthday ? '#000000' : '#888888',
					}"
				>
					{{ form.birthday ? form.birthday : "请选择出生日期" }}
					<uni-icons type="right" color="#888888" size="16" />
				</picker>
			</view>
			<view class="form-item">
				<text class="label">地址</text>
				<addresspicker
					class="flex ali-c"
					@change="hangleaddress"
					:style="{
						color: form.area[0] ? '#000000' : '#888888',
					}"
				>
					{{ form.area[0] ? form.area[0] + " " + form.area[1] + " " + form.area[2] : "请选择地址" }}
					<uni-icons type="right" color="#888888" size="16" />
				</addresspicker>
				<!-- <picker mode="date" class="flex ali-c" :style="{
                    color: '#888888'
                }">
                    {{ '请选择地址' }}
                    <uni-icons type="right" color="#888888" size="16" />
                </picker> -->
			</view>
			<view class="form-item">
				<text class="label">详细地址</text>
				<input v-model="form.address" placeholder="请输入详细地址" />
			</view>
			<view class="form-item">
				<text class="label">职业</text>
				<picker
					:range="worklist"
					@change="changework"
					range-key="major_name"
					class="flex ali-c"
					:style="{
						color: work ? '#000000' : '#888888',
					}"
				>
					{{ work ? worklist[work].major_name : "请选择职业" }}
					<uni-icons type="right" color="#888888" size="16" />
				</picker>
			</view>
			<view class="form-item" v-if="worklist[work].major_name == '其它'">
				<text class="label">自定义职业</text>
				<input v-model="form.work_name" placeholder="请输入您的职业" />
			</view>
			<view class="form-item">
				<text class="label">证书</text>
				<view style="width: 100%">
					<view v-if="form.certimg.length == 0" class="choose-image" @click="chooseImage(1)">
						<image src="/static/camera.png" mode="widthFix" />
						<text class="mt-20 text-grey">添加图片</text>
					</view>
					<view class="certimg" v-else>
						<view class="certitem" v-for="(item, index) in form.certimg" :key="index">
							<image :src="item" @click="$preview(item, [item])"></image>
							<image class="closen" @click="spliceimg(index, 1)" src="../../static/off.png"></image>
						</view>
						<view class="certitem">
							<view class="linebox" @click="chooseImage(1)">
								<image src="/static/camera.png" mode="widthFix" />
								<view>添加图片</view>
							</view>
						</view>
					</view>
					<!-- <image @click="$preview(src, [src])" class="mt-20" :src="src" mode="widthFix"
					    style="width: 100%;" /> -->
				</view>
			</view>
			<view class="form-item">
				<text class="label">图片</text>
				<view style="width: 100%">
					<view v-if="form.imglist.length == 0" class="choose-image" @click="chooseImage(2)">
						<image src="/static/camera.png" mode="widthFix" />
						<text class="mt-20 text-grey">添加图片</text>
					</view>
					<view class="certimg" v-else>
						<view class="certitem" v-for="(item, index) in form.imglist" :key="index">
							<image :src="item" @click="$preview(item, [item])"></image>
							<image class="closen" @click="spliceimg(index, 2)" src="../../static/off.png"></image>
						</view>
						<view class="certitem">
							<view class="linebox" @click="chooseImage(2)">
								<image src="/static/camera.png" mode="widthFix" />
								<view>添加图片</view>
							</view>
						</view>
					</view>
					<!-- <view class="choose-image" @click="chhooseImage(2)">
                        <image src="/static/camera.png" mode="widthFix" />
                        <text class="mt-20 text-grey">添加图片</text>
                    </view> -->
				</view>
			</view>
			<view class="form-item">
				<text class="label">党员</text>
				<view>
					<switch color="#FF8A9B" style="transform: scale(0.7)" @change="switchChange" />
				</view>
			</view>
		</view>

		<view class="form mt-20">
			<view class="form-item">
				<text class="label">可服务时间段</text>
				<view
					@click="openTimeRange"
					:style="{
						color: time ? '#000000' : '#888888',
					}"
					>{{ form.time.length !== 0 ? form.time.map((item) => item.start_time + "-" + item.end_time) : "可多选" }}<uni-icons type="right" color="#888888" size="16"
				/></view>
			</view>
			<view class="form-item">
				<text class="label">选择标签</text>
				<view
					@click="openLabelPick"
					:style="{
						color: label ? '#000000' : '#888888',
					}"
					>{{ form.label.length !== 0 ? form.label.map((item) => item.major_name) : "可多选" }}<uni-icons type="right" color="#888888" size="16"
				/></view>
			</view>
			<view class="form-item">
				<text class="label">备注说明</text>
				<input v-model="form.remark" placeholder="可选填" />
			</view>
		</view>
		<view style="height: 120rpx"></view>
		<view class="confirm-button">
			<view @click="sumbitvolunteer()">提交</view>
		</view>
		<!-- 可选服务时间段 -->
		<timeRange ref="timeRange" :list="timelist" @handletime="handletime"></timeRange>
		<!-- 标签 -->
		<labelPick ref="labelPick" :list="labellist" @handlelabel="handlelabel"></labelPick>
	</view>
</template>
<script>
import timeRange from "./components/timerange.vue"
import labelPick from "./components/labels.vue"
import addresspicker from "../../uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue"
export default {
	components: { timeRange, labelPick, addresspicker },
	data() {
		return {
			src: "",
			form: {
				real_name: "",
				sex: "",
				birthday: "",
				work_id: "",
				remark: "",
				file: "", //证书
				certimg: [],
				img: "", //图片
				imglist: [],
				is_dy: 2, //是否党员1是2否
				label: [],
				time: [],
				area: [],
				address: "",
				province_name: "",
				city_name: "",
				area_name: "",
				work_name: "", //自定义职业
			},
			sex_list: [
				{ label: "保密", value: 0 },
				{ label: "男", value: 1 },
				{ label: "女", value: 2 },
			],
			work: "",
			worklist: [], //职业列表
			labellist: [], //标签列表
			timelist: [], //时间段列表
		}
	},
	onReady() {},
	onLoad() {
		this.getlist()
		this.gettime()
	},
	methods: {
		//获取标签，职业列表
		getlist() {
			this.$http({
				url: "/api/Course/major",
			}).then((res) => {
				this.worklist = res.data.arr3 || []

				this.worklist.push({
					id: "",
					is_add: "",
					major_name: "其它",
					sort: "",
					type: null,
				})
				this.labellist = res.data.arr4
				console.log(this.labellist)
			})
		},
		//获取时间段列表
		gettime() {
			this.$http({
				url: "/api/Course/vol_time",
			}).then((res) => {
				this.timelist = res.data
			})
		},
		//是否党员
		switchChange(e) {
			if (e.detail.value == true) {
				this.form.is_dy = 1 //是否党员1是2否
			} else {
				this.form.is_dy = 2
			}
			console.log("switch2 发生 change 事件，携带值为", e.detail.value)
		},
		//选择标签
		handlelabel(result) {
			this.form.label = result.filter((item) => item.check == true)
			console.log(result, this.form.label, "result")
		},
		//选择时间段
		handletime(result) {
			this.form.time = result.filter((item) => item.check == true)
			console.log(result)
		},
		//选择地址
		hangleaddress(e) {
			this.form.area = []
			this.form.area = e.data
			console.log(e.data)
		},
		openTimeRange() {
			this.form.time = []
			this.$refs.timeRange.open()
		},
		openLabelPick() {
			this.form.label = []
			this.$refs.labelPick.open()
		},
		//选择生日
		birthChange({ detail: { value } }) {
			this.form.birthday = value
		},
		getTimeFormat(timeS) {
			//2022-02-02 02:22:22  2023-06-28 18:06:00
			let time = new Date(timeS).getTime() / 1000 //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time
		},
		//选择职业
		changework({ detail: { value } }) {
			this.work = value
			this.form.work_id = this.worklist[value].id
			console.log(this.form.work_id)
		},
		sexChange({ detail: { value } }) {
			this.form.sex = value
		},
		chooseImage(type) {
			this.$upload(1).then((res) => {
				if (type == 1) {
					this.form.certimg.push(...res)
				} else {
					this.form.imglist.push(...res)
				}
				// console.log(this.certimg, 'this.certimg', res) //item.file.full_url
			})
		},
		//删除图片
		spliceimg(index, n) {
			if (n == 1) {
				this.form.certimg.splice(index, 1)
			} else {
				this.form.imglist.splice(index, 1)
			}
		},
		//提交
		sumbitvolunteer() {
			let form = JSON.parse(JSON.stringify(this.form))

			if (!form.real_name || !form.address) {
				uni.showToast({
					title: "请确认姓名或地址是否填写",
					icon: "none",
				})
				return
			}
			if (form.area.length == 0) {
				uni.showToast({
					title: "请选择地址",
					icon: "none",
				})
				return
			}
			if (form.label.length == 0 || form.time.length == 0) {
				uni.showToast({
					title: "请选择标签或时间段",
					icon: "none",
				})
				return
			}
			form.file = form.certimg.join("|")
			form.img = form.imglist.join("|")
			form.province_name = form.area[0]
			form.city_name = form.area[1]
			form.area_name = form.area[2]
			form.label = form.label.map((item) => item.id)
			form.time = form.time.map((item) => item.id)
			form.birthday = this.getTimeFormat(form.birthday)
			if (this.worklist[this.work].major_name == "其它") {
				if (!form.work_name) {
					uni.showToast({
						title: "请输入职业",
						icon: "none",
					})
					return
				}
				form.status = 2
			}
			this.$http({
				url: "/api/Course/vol_register",
				data: form,
			}).then((res) => {
				uni.showToast({
					title: res.msg,
					icon: "none",
				})
				uni.navigateBack({
					delta: 1,
				})
			})
		},
	},
}
</script>
<style lang="scss">
.authoration-page {
	padding: 24rpx 0;
	padding-bottom: env(safe-area-inset-bottom);

	.form {
		padding: 0 30rpx;
		background-color: white;
		border-radius: 20rpx;

		.form-item {
			display: flex;
			font-size: 32rpx;
			font-weight: normal;
			color: #555555;
			padding: 40rpx 0;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

			input {
				text-align: right;
				color: #000000;
			}
		}

		.form-item:last-child {
			border-bottom: none;
		}
	}

	.choose-image {
		margin-top: 20rpx;
		border: 1px dashed rgba(0, 0, 0, 0.2);
		justify-content: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 50rpx 0;
		image {
			width: 100rpx;
		}
	}
	.certimg {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		.certitem {
			width: 33.3%;
			text-align: center;
			// height:210rpx;
			padding: 10rpx 0;
			position: relative;
			image {
				width: 190rpx;
				height: 190rpx;
			}
			.closen {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				z-index: 8;
				top: 0;
				right: 10rpx;
			}
			.linebox {
				width: 190rpx;
				height: 190rpx;
				border: dashed 2rpx #999999;
				margin: 0 auto;
				text-align: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #888888;
				image {
					width: 66rpx;
					height: 60rpx;
					margin: 40rpx 0 20rpx 0;
				}
			}
		}
	}
	.confirm-button {
		width: 100%;
		height: 110rpx;
		background-color: #f2f2f2;
		position: fixed;
		bottom: 0;
		z-index: 99;
		> view {
			width: 690rpx;
			height: 96rpx;
			background: #ff8a9b;
			border-radius: 83rpx 83rpx 83rpx 83rpx;
			opacity: 1;
			text-align: center;
			color: white;
			margin: 10rpx auto;
			// margin-top: 30rpx;
			line-height: 96rpx;
		}
	}
}
</style>
